各位還記得前面我們有提到 HTML Parser 遇到 Javascript 就會停下來先等待把 Javascript 抓下來並且執行過後,在繼續進行 DOM 的建構嗎?
以下面的 HTML Document 為例,那麼假設今天遇到一段 external JS ,其下面又有一個 external JS ,瀏覽器必須要把第一個抓完、執行完後才 dispatch request 去抓第二個 JS 嗎?
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="scripta.js" />
<script src="scriptb.js" />
<p>Hello this is a test page.</p>
過去瀏覽器遇到這樣的狀況的確會停下來等第一個抓完、執行完才抓第二個,但現在的瀏覽器已經針對這個嚴重的 performance issue 進行了一項改進,增加了 Pre-loader 這個東西。當瀏覽器碰到 external JS 的時候依然會停下建構 DOM 的動作,但在 dispatch 一個 request 抓當前的 JS 之後,Pre-loader 就會掃描這一段 external JS 之下的 HTML ,看看有沒有什麼資源是可以先發送 request 事先取得的,諸如圖片、JS 等等,因此現在這個問題已經得到解決了。
詳細資訊可以參閱這篇文章:http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/